//引入轮播图
function swiper(){
    var mySwiper = new Swiper ('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,//自动滑动
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
          clickable :true,
          dynamicMainBullets: 5,
        //   bulletActiveClass: 'my-bullet-active',
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })        
    }
      //渲染用户信息
function showUser() {
  let userstr = localStorage.getItem('USER')
  let user = JSON.parse(userstr) || []
  if(user == ''){
      return
  }
    const loginEle = document.querySelector('#header .login')
    loginEle.innerHTML =  `<span>您好~${user.username}</span>`
    productNum()
  }
  // 显示购物车商品数量
function productNum(){
  const amountEle = document.querySelector('#header .amount')
  //从localStorage中拿到商品数组
  let productListStr = localStorage.getItem("XIAOMI_CART")
  let productList = JSON.parse(productListStr) || []
  let amount = productList.length
  amountEle.innerHTML = amount
}
/* 搜索框功能 
 1.点击放大镜弹出搜索框
 2.点击搜索框搜索用户输入内容
 3.点击取消框隐藏搜索框
 */
//显示搜索框
function showSearch(){
   const btn = document.querySelector('#nav .icon-fangdajing')
   const box = document.querySelector('#nav .container')
  let str =  `<div class="search">
                <div>  
                    <div class="submit"><span class="iconfont icon-sousuo"></span></div>
                    <input type="text" placeholder="搜索商品">
                    <div class="reset"><span class="iconfont icon-quxiao"></span></div>
                </div>
              </div>`

   btn.addEventListener('click',function(){
         box.innerHTML = str
    onSearch()
   })   
}
showSearch()
// 搜索功能
function  onSearch(){
  const searchEle = document.querySelector('#nav .search')
  const box = document.querySelector('#nav .container')
  let str =     `<div class="mainnav">
                <a href="../pages/index.html"><img src="../static/images/logo.png" alt="logo" /></a>
                <div class="menu">
                    <div><a href="#">小米专区</a></div>
                    <div><a href="#">鸿蒙智联</a></div>
                    <div><a href="#">莫塞尔</a></div>
                    <div><a href="#">小米智选</a></div>
                    <div><a href="#">HarmonyOS</a></div>
                    <div><a href="#">特惠企采</a></div>
                    <div><a href="#">教育购</a></div>
                </div>
                <span class="iconfont icon-fangdajing"></span>  
            </div>`
  searchEle.addEventListener('click',function(e){
       e = e || window.event
       let target = e.target || e.srcElement
      //隐藏搜索框
       if (target.getAttribute('class')  == "iconfont icon-quxiao") {
        box.innerHTML = str
        showSearch()
       }
       //搜索商品
       if (target.getAttribute('class')  == "iconfont icon-sousuo"){
          const inputEle = searchEle.querySelector('input')
          let value = inputEle.value
          window.open('../pages/details.html?id='+ value,'_blank');
       }
  })
}

  //渲染轮播图  
function showSwiper(){
    axios({
      method: 'get',
      url: 'http://api.yuguoxy.com/api/shop/banner',
    }).then(response => {
      let data = response.data
      let { resultCode, resultInfo } = data //解构赋值
      if (resultCode == 1) {
         let swiperList = resultInfo.list
         let str = swiperList.map(item => {
          return ` <div class="swiper-slide"><a href="#"><img src="${item.url}" alt="${item.content}"></a></div> `
        }).join('')
        const swiperBox = document.querySelector('#banner .swiper-wrapper')
        swiperBox.innerHTML = str
        swiper()
      }
    })
    }
    let Str = ''
    let pageNo = 1
//动态渲染商品列表
function showProductList(pageNo){
  axios({
    method: 'get',
    url: 'http://api.yuguoxy.com/api/shop/list',
    params:{
      pageSize: 8,
			pageNo,
    }
  }).then(response => {
    let data = response.data
    let { resultCode, resultInfo } = data //解构赋值
    if (resultCode == 1) {
       let productList = resultInfo.list
       let str = productList.map(item => {
        return ` <li data-index="${item.id}">
                    <div class="img" data-index="${item.id}"><img src="${item.picture}" alt="" data-index="${item.id}"></div>
                    <h5 data-index="${item.id}">${item.shop}</h5>
                    <div class="price" data-index="${item.id}">￥${item.price}</div>
                    <div class="point" data-index="${item.id}"><span data-index="${item.id}">赠送积分</span></div>
                    <div class="evaluate" data-index="${item.id}"><span data-index="${item.id}">12580</span>人评价&emsp;<span data-index="${item.id}">99%</span>好评率</div>
                </li> `
      }).join('')
      const productBox = document.querySelector('#main .productList>ul')
      Str += str
      productBox.innerHTML = Str
    }
  })
  }
  //查看更多
function loadMore(){
  const btn = document.querySelector('#main .productList button')
  btn.addEventListener('click',function(){
    showProductList(++pageNo)
  })
}
// 商品详情页跳转
function jumpDetails(){
  const ulEle = document.querySelector('#main .productList>ul')
  //利用事件委托实现绑定所有产品点击事件
  ulEle.addEventListener('click',function(e){
     e = e || window.event
     let target =e.target || e.srcElement
     let id = target.getAttribute('data-index')
     location.href= '../pages/details.html?id='+id
  })
}
/* 
跳转顶部
*/
function returnTop(){
  const divEle = document.querySelector('#return')
   window.onscroll = function(){
    let h = document.body.scrollTop || document.documentElement.scrollTop
    if ( h > 200) {
      divEle.style.display = 'block'
      divEle.onclick =function(){
        document.body.scrollTop = 0 
       document.documentElement.scrollTop = 0
      }
    }else{
      divEle.style.display = 'none'
    }
  } 
}
returnTop()
loadMore()
  showUser()
  showSwiper()
  showProductList()
  jumpDetails()